<?php /*a:1:{s:54:"/www/wwwroot/llz/application/item/view/video/last.html";i:1719453625;}*/ ?>
<html lang="zh-CN"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="referrer" content="no-referrer">
        <title><?php echo htmlentities($data['title']); ?></title>
        <link rel="stylesheet" href="/static/js/vant.css"/>

        <style>
            .loading {
                width: 120px;
                height: 120px;
                margin: 200px auto;
                position: relative;
            }

            .circle {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .circle span {
                width: 30px;
                height: 30px;
                display: inline-block;
                background: #cf2247;
                border-radius: 100%;
                position: absolute;
                -webkit-animation: mycircle 1.2s infinite ease-in-out;
                animation: mycircle 1.2s infinite ease-in-out;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }

            .circle2 {
                -webkit-transform: rotateZ(45deg);
                transform: rotateZ(45deg);
            }

            .circle3 {
                -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }

            .circle>span:nth-child(1) {
                top: 0;
                left: 0;
            }

            .circle>span:nth-child(2) {
                top: 0;
                right: 0;
            }

            .circle>span:nth-child(3) {
                right: 0;
                bottom: 0;
            }

            .circle>span:nth-child(4) {
                left: 0;
                bottom: 0;
            }

            .circle2>span:nth-child(1) {
                -webkit-animation-delay: -1.1s;
                animation-delay: -1.1s;
            }

            .circle3>span:nth-child(1) {
                -webkit-animation-delay: -1.0s;
                animation-delay: -1.0s;
            }

            .circle1>span:nth-child(2) {
                -webkit-animation-delay: -0.9s;
                animation-delay: -0.9s;
            }

            .circle2>span:nth-child(2) {
                -webkit-animation-delay: -0.8s;
                animation-delay: -0.8s;
            }

            .circle3>span:nth-child(2) {
                -webkit-animation-delay: -0.7s;
                animation-delay: -0.7s;
            }

            .circle1>span:nth-child(3) {
                -webkit-animation-delay: -0.6s;
                animation-delay: -0.6s;
            }

            .circle2>span:nth-child(3) {
                -webkit-animation-delay: -0.7s;
                animation-delay: -0.7s;
            }

            .circle3>span:nth-child(3) {
                -webkit-animation-delay: -0.4s;
                animation-delay: -0.4s;
            }

            .circle1>span:nth-child(4) {
                -webkit-animation-delay: -0.3s;
                animation-delay: -0.3s;
            }

            .circle2>span:nth-child(4) {
                -webkit-animation-delay: -0.2s;
                animation-delay: -0.2s;
            }

            .circle3>span:nth-child(4) {
                -webkit-animation-delay: -0.1s;
                animation-delay: -0.1s;
            }

            @-webkit-keyframes mycircle {
                0% {
                    transform: scale(0.0);
                }

                40% {
                    transform: scale(1.0);
                }

                80% {
                    transform: scale(0.0);
                }

                100% {
                    transform: scale(0.0);
                }
            }

            @keyframes mycircle {
                0% {
                    transform: scale(0.0);
                }

                40% {
                    transform: scale(1.0);
                }

                80% {
                    transform: scale(0.0);
                }

                100% {
                    transform: scale(0.0);
                }
            }

            * {
                margin: 0;
                padding: 0;
            }

            .home {
                padding: 15px;
                box-sizing: border-box;
            }

            .title {
                /*margin-top: 20px;*/
                font-size: 22px;
            }

            .info {
                color: #888;
                margin: 10px 0 5px 0;
            }

            .info>.author {
                color: #7d90a9;
                margin-right: 10px;
            }

            .video {
                max-width: 100%;
            }

            video {
                width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
            }

            .share-arrow {
                position: fixed;
                top: 30px;
                right: 5px;
                width: 45px;
                z-index: 999;
                -webkit-animation: backArrowFlow .4s ease infinite;
                animation: backArrowFlow .4s ease infinite;
            }

            @keyframes backArrowFlow {
                0%, 100% {
                    top: 30px;
                }

                50% {
                    top: 40px;
                }
            }

            .musicIcon {
                width: 30px;
                height: 30px;
                position: fixed;
                top: 150px;
                right: 5px;
                background-color: #fff;
                border-radius: 20px;
                animation: rotate 2s linear infinite;
            }

            .paused {
                animation-play-state: paused;
            }

            @keyframes rotate {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }

            .mask {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 9999;
                width: 100vw;
                height: 100vh;
                background-color: rgba(0, 0, 0, .3);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .maskBtn {
                width: 150px;
                height: 60px;
                background: #e74c3c;
                color: #fff;
                text-align: center;
                line-height: 60px;
                font-size: 20px;
            }

            .video-container {
                margin: 0 auto;
                margin-top: 6px;
                position: relative;
                max-width: 100%;
                width: 100%;
                aspect-ratio: auto 400 / 400;
                height: 400px;
            }

            .video-container video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .buttomCard {
                margin-top: 10px;
                width: 100%;
            }

            .buttomCard>img {
                width: 100%;
                height: 150px;
                object-fit: cover;
            }

            .topCard {
                margin: 15px;
                height: 90px;
                border-radius: 5px;
                box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
                -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
            }

            .topCard .avatar {
                padding: 15px;
                width: 60px;
                height: 60px;
            }

            .topCard .avatar img {
                border-radius: 5px;
            }

            .topCard .cardInfo {
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .topCard .cardInfo .cardTitle {
                color: red;
                animation: textblink 1s infinite;
            }

            @keyframes textblink {
                0% {
                    color: #F76B24;
                }

                50% {
                    color: black;
                }

                100% {
                    color: #F76B24;
                }
            }

            .topCard .cardInfo .cardSubTitle {
                font-size: 14px;
                color: #909399;
            }

            .topCard .cardTips {
                margin-left: 10px;
                line-height: 100px;
                text-align: center;
                font-size: 16px;
                color: #909399;
            }

            @media (max-width: 400px) {
                .topCard .cardSubTitle {
                    font-size: 14px;
                    color: #cf2247;
                }

                .topCard .cardTips {
                    width: 32px;
                    line-height: 20px;
                    font-size: 10px;
                }
            }

            #scrolling-text-container {
                width: 100%;
                height: 36px;
                line-height: 36px;
                overflow: hidden;
                position: relative;
            }

            #scrolling-text-container span {
                font-size: 18px;
                white-space: nowrap;
                position: absolute;
                animation: scrollText 15s linear infinite;
                animation-delay: 1s;
                transform: translateX(100%);
            }

            @keyframes scrollText {
                0% {
                    transform: translateX(100%);
                }

                100% {
                    transform: translateX(-100%);
                }
            }
            .chakan{
                background-color: #F44336;
                color:#fff;
                padding: 15px 25px;
                font-size: 18px;
            }
            .backt{
                position: fixed;
                top: 30px;
                left: 0px;
                background: #b7b0b0;
                font-size: 13px;
                padding: 2px 8px; 
                border-radius: 0px 16px 16px 0px;
                opacity: 0.8;
                
                font-weight: 600;
                
            }
        </style>
        
   

    </head>
    <body data-ext-version="3.0.2">
       <div id="app" class="home">
        <template>
     
            <div >
                <div>
                    <img src="<?php echo htmlentities($data['img']); ?>" alt="" />
                </div>
            </div>
        

        </template>
        </div>


<script src="/static/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/vant.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>


		<script type="text/javascript">

			new Vue({
				el: '#app',
				data: {
				    cfg:{},
                    info:{},
                    show:false,
                    showpop:true,
                    isOff:true,
                    isOffs:true

				},
				watch:{
            
                   
                },
                created:function(){
                                    
                   


                },
        		mounted:function(){
                   

        		},
                destroyed () {
                   
                },
        		methods:{
        		   
    
        		}
			})

		</script>
		
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/howler/2.2.3/howler.min.js" type="application/javascript"></script>
<script>
    const soundBgm = new Howl({
        src: "<?php echo htmlentities($data['audio']); ?>",
        loop: true,
        preload: true,
    })

    soundBgm.on('load',()=>{
        window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {},  ()=> {
            soundBgm.play();
        }, false);
    })
</script>
		
		

</body>


</html>